<template>
	<view>
		<view class="top">
			<my-text text='场次' width='65rpx' />
			<view class="top_1">场次时间均为演出当地时间</view>
			<view class="top_2" @click="curee1=1" :style="{
				'border': curee1==1?'1rpx solid #FF2424' :''
			}">
				<image src="@/static/img/nz.png" style="width:34rpx ;height: 34rpx;" />
				<text class="top_2_15">{{info.activity_time}}</text>
			</view>
		</view>
		<view class="cxian">

		</view>
		<view class="top top_2">
			<my-text text='票档' width='65rpx' />
			<view v-if="info.location==0">
				<view class="top_2_2">
					<view class="top_2_12 " v-for="(item,index) in info.ticket" @click="zx(item)" :style="{
						'border': list.id==item.id?'1rpx solid #FF2424' :''
					}">
						<text>{{item.name}}：{{item.money}}元</text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="top_2_1" @click="curee=1" :style="{
						'margin-top': '30rpx',
						'border': curee==1?'1rpx solid #FF2424' :''
					}">
					<text>定位金：<text style="color: #FF2424;">{{info.location_price}}元</text></text>
					<text>（签到后退款)</text>
				</view>
			</view>

		</view>
		<ljzf :money="money" @onchange='play_' :type="'确认选票'" />
	</view>
</template>

<script>
	import ljzf from '@/components/ljzf.vue'
	export default {
		components: {
			ljzf
		},
		data() {
			return {
				list: {},
				curee: '1',
				curee1: '0',
				cur_id: 0,
				info: {},
			};
		},
		onLoad(e) {
			this.cur_id = e.cur_id,
				this.getinfo()
		},
		computed: {
			money() {
				if (this.info.location == 0) {
					return this.list.money
				} else {
					return this.info.location_price
				}
			},
		},
		methods: {
			zx(item) {
				this.list = item
			},
			getinfo() {
				this.$api('offline/selectTicket', {
					cur_id: this.cur_id
				}).then(reset => {
					this.info = reset.data
					if (reset.data.location == 0) {
						this.list = reset.data.ticket[0]
					}
				})
			},
			play_() {
				let data = {
					cur_id: this.cur_id,
					is_location: this.info.location,
					location_price: this.info.location == 1 ? this.info.location_price : '',
					is_ticket: this.info.location == 0 ? 1 : 0,
					ticket_price: this.info.location == 0 ? this.list.money : 0,
					ticket_id: this.info.location == 0 ? this.list.id : ''
				}
				this.$api('offline/confirmTicket', data).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg, 1)
						if (res.data.user_info == 1) {
							setTimeout(() => {
								uni.navigateTo({
									url: `./wanshanziliao?cur_id=${this.cur_id}&order_id=${res.data.order_id}`
								});
							}, 500)
						} else {
							setTimeout(() => {
								uni.navigateTo({

									url: `/pages/play/purchasexiaxaik?order_id=${res.data.order_id}`
									// url: `/pages/play/purchase?type=${'线下课程'}&biaoti=${'报名'}&cur_id=${this.cur_id}&order_id=${res.data.order_id}`
								});
							}, 500)
						}

					} else {
						this.$toast(res.msg, 0)
					}
				})
				// console.log('11')
				// uni.navigateTo({
				// 	url: './wanshanziliao'
				// });
			}
		}
	}
</script>

<style lang="scss">
	.top_2_2 {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		flex-wrap: wrap;

		.top_2_12 {
			margin-bottom: 25rpx;
			width: 48% !important;
			background-color: #F5F5F5;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			height: 70rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
		}
	}

	.top_2 {
		.top_2_1 {
			width: 421rpx;
			height: 70rpx;
			background-color: #F5F5F5;
			display: flex;
			justify-content: center;
			align-items: center;

			text:nth-of-type(2) {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}
		}
	}

	.cxian {
		height: 1rpx;
		background-color: #E3E3E3;
		margin-top: 20rpx;
	}

	.top {
		padding: 30rpx;

		.top_1 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			opacity: 1;
			margin: 20rpx 0 20rpx 0;
		}

		.top_2 {
			display: flex;
			width: 70%;
			justify-content: center;
			align-items: center;
			padding: 15rpx 25rpx 15rpx 25rpx;
			background-color: #F5F5F5;

			.top_2_15 {
				font-size: 28rpx;
				margin-left: 15rpx;
				font-family: HarmonyOS Sans;
				font-weight: 400;
				color: #333333;
				opacity: 1;
			}
		}
	}
</style>
